<template>
  <div class="service-service">
    <loading :show="loading" />
    <div class="text">
      客服电话: <span><a :href="tel">{{ data.mobile }}</a></span>
    </div>
    <div class="text">
      客服微信: <span>{{ data.wx }}</span>
    </div>
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'ServiceAbout',
  components: {
    Loading
  },
  computed: {
    tel() {
      return `tel:${this.data.mobile}`
    }
  },
  data() {
    return {
      data: {},
      loading: false
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      api.Exec.service().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.data = data
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    this.fetchData()
  }
}
</script>

<style scoped lang="stylus">
.service-service
  .text
    text-align left
    background white
    line-height 1.3em
    margin-bottom 10px
    padding 20px
    font-size 14px
    border-radius 10px
    span
      padding-left 10px
      color red
      a
        color red
</style>
